<template>
	<view>
		<u-navbar back-text="返回" :border-bottom="false" height="46">
		</u-navbar>
		<view class="user_warp">
			<view class="user_logo">
				<image src="../../../static/index/logo.png" mode="widthFix"></image>
				<view class="user_logo_name">
					中国匠工 欢迎您
				</view>
			</view>
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item :label-position="labelPosition" label="手机号" prop="phone" label-width="150" left-icon="phone-fill"
				 :left-icon-style="{color:'#c40200',fontSize:'50rpx',marginRight:'30rpx'}">
					<u-input :border="border" placeholder="请输入手机号" v-model="model.phone" type="number" :custom-style="{paddingLeft:'90rpx'}"
					 height="20rpx"></u-input>
				</u-form-item>
				<view class="user_password">
					<u-form-item :label-position="labelPosition" label="密码" prop="password" label-width="150" left-icon="lock-opened-fill"
					 :left-icon-style="{color:'#c40200',fontSize:'50rpx',marginRight:'30rpx'}">
						<u-input :password-icon="true" :border="border" type="password" v-model="model.password" placeholder="请输入密码"
						 :custom-style="{paddingLeft:'90rpx'}" height="20rpx"></u-input>
					</u-form-item>
				</view>


				<u-button @click="submit" type="error" shape="circle" class="custom-style">登录</u-button>
				<view class="user_register">
					<view class="user_post" @click="Repgister">
						用户注册
					</view>
					<view class="user_forget" @click="forgotPassword">
						忘记密码
					</view>
				</view>
				<view class="user_party">
					<view class="user_qq" @click="vxlogin">
						<u-icon name="weixin-fill" size="40"></u-icon>
					</view>
					<view class="user_vx"  @click="qqlogin">
						<u-icon name="qq-fill" size="40"></u-icon>
					</view>
				</view>
				<view class="agreement">
					<u-checkbox v-model="check" @change="checkboxChange" size="28rpx" active-color="#E0E0E0">
						<view class="agreement-text">
							登录即表示您已同意<text>《中国匠工免责条款-隐私条款》</text>
						</view>
					</u-checkbox>
				</view>
				<u-toast ref="uToast" />
			</u-form>
		</view>

	</view>
</template>

<script>
	import loginApi from './login.js'  
	export default {
		data() {
			return {
				model: {
					phone: '',
					password: '',
				},
				border: false,
				check: false,
				agreement: false,
				labelPosition: 'top',
				errorType: ['message'],
				rules: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						},
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: ['change', 'blur'],
						},
						{
							// 正则不能含有两边的引号
							// pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
							message: '请输入密码',
							trigger: ['change', 'blur'],
						}
					],
				}
			};
		},
		onLoad() {},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			checkboxChange(e) {
				this.model.agreement = e.value;
			},
			submit() {
				this.$refs.uForm.validate(async (valid) => {
					let _this = this
					if (valid) {
						if (!_this.model.agreement) {
							_this.$u.toast('请勾选协议')
						} else {
							let params = {
								cmd: 'mMember_Login',
								para: JSON.stringify({
									username: _this.model.phone,
									password: _this.$md5(_this.model.password),
								})
							};
							let res = await _this.$u.api.getProfile(params)
							console.log('手机号登录----》',res)
							if (res.ResponseID != 0) {
								_this.$refs.uToast.show({
									title: res.Message,
								})
							} else {
								let userInfo = res.Data;
								console.log(userInfo)
								_this.$store.commit('$_setToken', userInfo.ak);
								_this.$store.commit('userIn', JSON.stringify(userInfo));
								_this.$refs.uToast.show({
									title: res.Message,
									url: '/pages/myuser/myuser',
									isTab: 'true'
								})
							}
						}

					} else {
						console.log('验证失败');
					}
				});
			},
			Repgister() {
				this.$u.route('/pages/myuser/user/Register');
			},
			forgotPassword(){
				this.$u.route('/pages/HomeLnner/forgot-password/forgot-password');
			},
			vxlogin() {
				let _this = this
				if (!_this.model.agreement) {
					_this.$u.toast('请勾选协议')
				}else{
					loginApi.vxLogin(function (result){
						_this.$store.commit('$_setToken',result.Data.ak)
						_this.$store.commit('userIn',JSON.stringify(result.Data))
						uni.switchTab({
							url:"/pages/myuser/myuser"
						})
					})
				}
			},
			qqlogin(){
				let _this = this
				if (!_this.model.agreement) {
					_this.$u.toast('请勾选协议')
				}else{
					loginApi.qqLogin(function (result){
						_this.$store.commit('$_setToken',result.Data.ak)
						_this.$store.commit('userIn',JSON.stringify(result.Data))
						uni.switchTab({
							url:"/pages/myuser/myuser"
						})
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.user_warp {
		padding: 0 60rpx;

		.user_logo {
			text-align: center;
			margin-top: 20rpx;

			image {
				width: 57rpx;
			}

			.user_logo_name {
				margin: 40rpx 0 40rpx 0;
				font-size: 34rpx;
				color: #212121;
			}
		}

		.user_password {
			margin-top: 40rpx;
			margin-bottom: 76rpx;
		}

		.custom-style {
			background-color: #c40200;
			width: 500rpx;
			height: 100rpx;
			margin-bottom: 40rpx;
			font-size: 36rpx;
		}

		.user_register {
			display: flex;
			justify-content: center;

			.user_post {
				margin-right: 46rpx;
			}

			.user_post,
			.user_forget {
				width: 191rpx;
				height: 60rpx;
				background: #E0E0E0;
				border-radius: 30rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 60rpx;
				margin-bottom: 80rpx;
			}

		}

		.user_party {
			display: flex;
			justify-content: center;
			margin-bottom: 50rpx;

			.user_qq {
				margin-right: 80rpx;
			}

			.user_qq,
			.user_vx {
				width: 62rpx;
				height: 62rpx;
				border: 2rpx solid #848484;
				border-radius: 50%;
				text-align: center;
				line-height: 66rpx;
			}

		}

		.agreement {
			.agreement-text {
				font-size: 20rpx;
				color: #666666;

				text {
					color: #212121;
				}
			}
		}
	}

	/deep/.u-form-item__message {
		padding-left: 90rpx !important;
	}

	/deep/.u-input__right-icon {
		height: 20rpx;
	}
</style>
